<template>
    <div class="rank-item">
        <!-- 头像 -->
        <div class="photo">
            <img :src="getImageUrl(item.img)" alt="图片" />
            <span>{{ item.number }}</span>
        </div>
        <div class="info">
            <div class="name">{{ item.name }}</div>
            <div class="number">
                <div class="inner">
                    {{ item.handsome }}帅气值
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { computed } from 'vue'
const props = defineProps(['item','maxHot'])
const item = props.item
const numberColor = computed(() => {
    if (item.number === 1) {
        return 'red'
    }else if (item.number === 2) {
        return 'green'
    }else if (item.number === 3) {
        return 'blue'
    }else {
        return 'white'
    }
}) 
const handsomeWidth = computed(() => {
    return item.handsome / props.maxHot * 100 + '%'
})
// Vite官方推荐的方式 Vite不支持Webpack的require语法，但你可以使用import.meta.glob
const getImageUrl = (name) => {
  return new URL(`/src/assets/images/${name}`, import.meta.url).href
}
</script>
<style lang="scss" scoped>
.rank-item {
    display: flex;
    margin-top: 20px;

    .photo {
        width: 150px;
        height: 150px;
        background: #fff;
        overflow: hidden;
        position: relative;
        border-radius: 10px;

        img {
            width: 100%;
            height: 100%;
        }

        span {
            position: absolute;
            top: 0;
            left: 0;
            color: #fff;
            background: v-bind(numberColor);
            height: 20px;
            width: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
    }

    .info {
        flex: auto;
        display: flex;
        flex-flow: column;
        justify-content: space-evenly;
        font-size: 20px;
        color: #fff;
        margin-left: 20px;

        .number {
            border-radius: 10px;
            text-indent: 0.3em;
        }

        .inner {
            width: v-bind(handsomeWidth);
            white-space: nowrap;
            border-radius: 10px;
            background-image: linear-gradient(90deg, #4a67e7 50%, #4cb3d3);
        }
    }
}
</style>